import React,{useState} from 'react'
import { Outlet ,NavLink } from 'react-router-dom';
import { mainRoute } from '../View/RouteConfig';
import { Tabbar,Search, Toast,Sticky   } from 'react-vant';
import { Friends } from '@react-vant/icons';
function Home() {
    const [value, setValue] = useState('');
    return (
        <div className='Home'>
            <Sticky >
            <Search
                showAction
                background="#4fc08d"
                label="4399 在线玩"
                actionText={<div onClick={() => Toast.info(value)}><Friends fontSize={20} /></div>}
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
            /></Sticky>
            <footer>
            <Tabbar>
                {
                    mainRoute.map((item,index)=>{
                        return <Tabbar.Item key={index}><NavLink to={item.path}>{item.txt}</NavLink></Tabbar.Item>
                    })
                }
            </Tabbar>
            </footer>
            <main>
                <Outlet></Outlet>
            </main>
        </div>
    )
}

export default Home